<template>
  <h3>{{ person }}</h3>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>职业：{{ job }}</h2>
  <h2>薪资：{{ salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="salary++">加薪</button>
</template>
<script>
import { reactive, toRef } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    // 数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          type: "前端",
          salary: 10,
        },
      },
    });

    const name1 = person.name;
    console.log(name1); //张三

    /* 
    toRef()方法会创建一个ref对象，内部指向另一个响应式对象中的某个属性，
    新创建出来的ref对象，会和源对象的属性建立连接
    当新ref对象发生变化，会自动映射到源对象
    */
    const name2 = toRef(person, "name");
    console.log(name2); //RefImpl对象

    // 返回一个对象供模版使用
    return {
      person,
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      job: toRef(person.job.j1, "type"),
      salary: toRef(person.job.j1, "salary"),
    };
  },
};
</script>

